<template>
  <div class="seckill">
    <div class="title">
      <i>京东秒杀</i>
      <i class="startTime">12</i>
      <count-down :endTime="endTime" />
  <a href=""> <span class="more">
        更多秒杀
        <span class="iconfont">> </span>
      </span></a>
    </div>
    <ul class="goods-list">
      <li v-for="item in SeckillGoods" :key="item.id">
        <img :src="item.url" alt="" />
        <p>￥{{ item.priceNow }}</p>
        <div>￥{{ item.price }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import CountDown from './CountDown.vue'

export default {
  name: 'Seckill',
  props: {
    SeckillGoods: {
      type: Array,
      default () {
        return []
      }
    },
    endTime: String
  },
  components: {
    CountDown
  }
}
</script>

<style lang="scss">
.pink {
  color: rgb(255, 39, 136);
}
.count-down{
  width: 4.5405rem;
}

.seckill {
  width: 90%;
  height: 3.6838rem;
  margin: 0.6216rem auto 0;
  padding: 0 0.2432rem;
  background: rgb(255, 255, 255);
  position: relative;
  top: -4.6622rem;
  border-radius: 0.3243rem;

  .title {
    padding: 0.2162rem 0;
      background: url('./IconSeckill.png') no-repeat 4.4622rem;
      background-size:1.0405rem;
    font-size: 14px;
    font-weight: 400;

    .startTime {
      width: 1.2865rem;
        background: url('./SeckillBg.png') no-repeat  center right;
      background-size: contain;
      padding-right: 20px;
      text-indent: 0.2703rem;
    color: rgb(255, 39, 136);
    }

    .more {
      float: right;
      margin-top: 0.1703rem;
     color: rgb(255, 39, 136);
      font-size: 12px;

      span {
        width: 0.3784rem;
        height: 0.3784rem;
        background: rgb(242, 48, 48);
        color: #fff;
        font-size: 12px;
        text-align: center;
        border-radius: 50%;
      }
    }
  }

  .goods-list {
    display: flex;

    li {
      flex: 1;
      scale: 0.8;

      img {
        width: 100%;
        margin-bottom: 0.2162rem;
      }

      p {
        color: rgb(242, 39, 12);
      }

      div {
        color: rgb(166, 153, 153);
        text-decoration: line-through;
      }
    }
  }
}
</style>
